<template>
   <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      active-text-color="orange"
      :router="true"
      :collapse="isOpen"
      > 
       <!-- 如果有子集菜单 就使用 el-submenu
     如果没有子集菜单就使用 el-menu-item -->

     <template v-for="(option,index2) in $store.state.menuList" >

      <el-submenu :index="option.path" v-if="option.children.length>0" :key="index2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ option.title }}</span>
        </template>
          <el-menu-item :index="opt.path" v-for="(opt, index3) in option.children" :key="index3">{{ opt.title }}</el-menu-item>
          <!-- <el-menu-item index="opt.path"></el-menu-item>
          <el-menu-item index="/movie/edit">电影编辑</el-menu-item>   -->
      </el-submenu>

      <el-menu-item v-else  :index="option.path" :key="index2">
        <i class="el-icon-menu"></i>
        <span slot="title">{{ option.title }}</span>
      </el-menu-item>


     </template>


      <!-- <el-submenu index="/movie">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>电影管理</span>
        </template>
          <el-menu-item index="/movie/list">电影列表</el-menu-item>
          <el-menu-item index="/movie/add">电影添加</el-menu-item>
          <el-menu-item index="/movie/edit">电影编辑</el-menu-item>  
      </el-submenu>
     <el-menu-item index="/user">
        <i class="el-icon-menu"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/role" >
        <i class="el-icon-document"></i>
        <span slot="title">角色管理</span>
      </el-menu-item>
      <el-menu-item index="/menu" >
        <i class="el-icon-document"></i>
        <span slot="title">菜单管理</span>
      </el-menu-item>
      <el-menu-item index="/order">
        <i class="el-icon-setting"></i>
        <span slot="title">订单管理</span>
      </el-menu-item> -->
    </el-menu>
</template>

<script>

export default {
    props:{
        isOpen:{
            type:Boolean,
            default:false
        }
    },
 methods:{
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
        // 路由跳转
        this.$router.push({
            path:key
        })
      },
    handleClose(key, keyPath) {
    console.log(key, keyPath);
    }
 }
}
</script>

<style>

</style>